import 'package:auth_code_textfield/auth_code_textfield.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/resources/pages/home_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:nylo_framework/nylo_framework.dart';

import '../../../app/controllers/login_controller.dart';
import '../../../bootstrap/helpers.dart';
import '../../../config/constant.dart';

class PhonecodePage extends NyPage<LoginController> {
  static String path = '/phonecode';

  @override
  init() async {
    // To update the state,
    // use: refreshPage(setState: () { });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: ScreenSize);

    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("public/assets/images/login_bg.png"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Container(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 84.w,
                        height: 84.w,
                        margin: EdgeInsets.only(top: 40.w, left: 40.w),
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 4.w,
                            color: ThemeColor
                                .get(context)
                                .fontGrey
                                .withOpacity(.05),
                          ),
                          borderRadius: BorderRadius.circular(50.sp), // 圆角半径
                        ),
                        child: Icon(
                          Icons.arrow_back_outlined,
                          color: ThemeColor
                              .get(context)
                              .background,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 80.w),
                    margin: EdgeInsets.only(top: 65.w),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "请输入验证码",
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    fontSize: 50.sp,
                                    color: ThemeColor
                                        .get(context)
                                        .background),
                              ),
                              Text(
                                "验证码已发送至 " +
                                    controller!.handlePhone(
                                        controller!.phoneController.text),
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    fontSize: 25.sp,
                                    color: ThemeColor
                                        .get(context)
                                        .background),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 280.w,
                        ),
                        Container(
                          child: Column(
                            children: [
                              Container(
                                height: 96.h,
                                child: AuthCodeTextfield(
                                  controller: controller!.phoneCodeController,
                                  mode: AuthCodeMode.singleItem,
                                  itemWidth: 100.w,
                                  itemHeight: 100.w,
                                  itemSpacing: 40.w,
                                  itemBackgroundColor: ThemeColor
                                      .get(context)
                                      .fontGrey
                                      .withOpacity(.3),
                                  textColor: Colors.white,
                                  cursorColor:
                                  ThemeColor
                                      .get(context)
                                      .background,
                                  cursorBottomOffset: 2,
                                ),
                              ),
                              SizedBox(
                                height: 50.w,
                              ),
                              InkWell(
                                onTap: () async {
                                  controller!.login(context, refreshPage);
                                },
                                child: Container(
                                  decoration: BoxDecoration(
                                    // color: Colors.transparent,
                                    gradient: LinearGradient(
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                      colors: [
                                        ThemeColor
                                            .get(context)
                                            .primaryBackgroundDeep,
                                        ThemeColor
                                            .get(context)
                                            .primaryBackgroundLight,
                                      ],
                                    ),
                                    border: Border.all(
                                      width: 4.w,
                                      color: ThemeColor
                                          .get(context)
                                          .primaryBackgroundDeep,
                                    ),
                                    borderRadius:
                                    BorderRadius.circular(50.sp), // 圆角半径
                                  ),
                                  width: 600.w,
                                  height: 96.h,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      (controller!.successLoading)
                                          ? Row(
                                        children: [
                                          Container(
                                            width: 20.0, // 设置容器宽度
                                            height: 20.0, // 设置容器高度
                                            child:
                                            CircularProgressIndicator(
                                              color:
                                              ThemeColor
                                                  .get(context)
                                                  .background,
                                              strokeWidth: 3.w,
                                            ),
                                          ),
                                          SizedBox(
                                            width: 20.w,
                                          )
                                        ],
                                      )
                                          : Text(""),
                                      Text(
                                        "立即登录",
                                        style: TextStyle(
                                          fontSize: 32.sp,
                                          color: ThemeColor
                                              .get(context)
                                              .background,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(child: SizedBox()),
                ],
              ),
            )
          ],
        ));
  }
}
